<template>
	<div class="herder">
		<div class="film">
			<h3>书城管理系统</h3>
		</div>
		<div class="come">
			<h3>欢迎进入书城管理系统网站  登录时间: {{ loginTime }}</h3> <!-- 添加这一行来显示登录时间 -->
		</div>
		<div class="home">
			<button @click="logout()">退出登录</button>
			<img :src="'http://127.0.0.1/api/public/showimg/'+list.img" />
			<p>{{list.account}}</p>
			<router-link to="/home/moviegenre" class="r">首页</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		methods:{
			logout(){
				localStorage.removeItem('token');
				localStorage.removeItem('account');
				localStorage.removeItem('name');
				localStorage.removeItem('img');
				localStorage.removeItem('role');
				localStorage.removeItem('vuex');
				this.account='';
				this.nickname = null;
				this.img = null;
				this.$router.push('/moblie/mysecret');
			}
		},
		created() {
			this.list.img = window.localStorage.getItem("img");
			this.list.account = window.localStorage.getItem("account");
		},
		computed: {  
		    loginTime() {  
		        return localStorage.getItem('loginTime') || '未登录'; // 如果未登录，则显示'未登录'  
		    }
		}
	}
</script>

<style scoped>
	.herder{
		display: flex;
		align-items: center;
		background-color: #23262e;
		width: 100%;
	}
	.herder .film h3{
		width: 200px;
		color: #009688;
	}
	.herder .come {
		width: 600px;
		display: flex;
		justify-content: center;
		color: #faf5e6;
	}
	.herder .home{
		display: flex;
		justify-content: center;
		margin-left: 600px;
		 width: 500px;
		 color: #abb2b5;
	}
	.herder .home img{
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
</style>
